<!DOCTYPE html>
<html>
<head>
    <title>Wave and Vibration Graphs</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="280"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Helper function to draw an arrow on the canvas context
    function drawArrow(context, fromX, fromY, toX, toY, headLength = 8) {
        const dx = toX - fromY;
        const dy = toY - fromY;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        context.beginPath();
        context.moveTo(fromX, fromY);
        context.lineTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        context.moveTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }
    
    // Function to draw one plot
    function drawPlot(context, originX, originY, horizLabel, plotLabel) {
        const axisLengthX = 200;
        const axisTotalHeight = 160;
        const amplitude = 60;
        const wavelength = 120;
        const plotLength = wavelength * 1.5;

        // Draw Axes
        drawArrow(context, originX, originY + axisTotalHeight / 2, originX, originY - axisTotalHeight / 2); // y-axis
        drawArrow(context, originX, originY, originX + axisLengthX, originY); // x-axis or t-axis

        // Draw Labels
        context.font = 'italic 18px Times New Roman';
        context.textAlign = 'center';
        context.textBaseline = 'bottom';
        context.fillText('y', originX - 5, originY - axisTotalHeight / 2 - 2);
        context.textAlign = 'left';
        context.textBaseline = 'middle';
        context.fillText(horizLabel, originX + axisLengthX + 5, originY);
        
        context.font = '18px Times New Roman';
        context.textAlign = 'right';
        context.textBaseline = 'top';
        context.fillText('O', originX - 4, originY + 4);

        context.textAlign = 'center';
        context.textBaseline = 'top';
        context.fillText(plotLabel, originX + 100, originY + axisTotalHeight / 2 + 10);

        // Draw Sine Wave
        context.beginPath();
        context.moveTo(originX, originY);
        for (let x_val = 0; x_val <= plotLength; x_val += 1) {
            const y_val = amplitude * Math.sin((2 * Math.PI / wavelength) * x_val);
            context.lineTo(originX + x_val, originY - y_val);
        }
        context.stroke();
    }

    // --- Draw Graph (a) ---
    const originA_X = 70;
    const originA_Y = 130;
    drawPlot(ctx, originA_X, originA_Y, 'x', '(a)');
    
    // Draw velocity vector u for graph (a)
    const uArrowY = originA_Y - 75; // Position arrow vertically
    const uArrowStartX = originA_X + 80;
    const uArrowEndX = uArrowStartX + 60;
    
    // Draw arrow for u
    ctx.beginPath();
    ctx.moveTo(uArrowStartX, uArrowY);
    ctx.lineTo(uArrowEndX, uArrowY);
    ctx.stroke();
    drawArrow(ctx, uArrowStartX, uArrowY, uArrowEndX, uArrowY);

    // Label for u
    ctx.font = 'italic 18px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('u', (uArrowStartX + uArrowEndX) / 2, uArrowY - 2);

    // --- Draw Graph (b) ---
    const originB_X = 330;
    const originB_Y = 130;
    drawPlot(ctx, originB_X, originB_Y, 't', '(b)');

</script>
</body>
</html>